<template>
  <view class="container">

    <!-- 图片轮播 -->
    <view class="property-swiper-section" v-if="listImages.length > 0">
      <u-swiper :list="listImages" :autoplay="true" :circular="true" :interval="3000" height="400"></u-swiper>
    </view>

    <!-- 基础信息卡片 -->
    <view class="info-card basic-info-card">
      <text class="property-name">{{ model.address }}</text>
      <view class="price-area">
        <text class="price-value">{{ model.createTime }}</text>
        <text class="area-value">{{ model.description }} </text>
      </view>
      <view class="likeveto">
        <view class="like-value">
          <u-icon name="thumb-up" :label=" model.likeCount "></u-icon>
        </view>
        <view class="veto-value">
          <u-icon name="thumb-down" :label=" model.vetoCount "></u-icon>
        </view>
      </view>
      <view class="tags-section" v-if="propertyTags.length > 0">
        <u-tag v-for="tag in propertyTags" :key="tag" :text="tag" plain bg-color="#e0f2fe" color="#0369a1" shape="circle"></u-tag>
      </view>
    </view>

    <!-- 位置信息卡片 -->
    <view class="info-card location-card" @click="handleOpenMap">
      <view class="section-title">
        <u-icon name="map" color="#10b981" size="18"></u-icon>
        <text class="title-text">位置信息</text>
        <u-icon name="arrow-right" color="#94a3b8" size="16" class="arrow-right"></u-icon>
      </view>
      <text class="address-text"> {{ model.address }}</text>
    </view>

    <!-- 房产描述卡片 -->
    <view class="info-card description-card">
      <view class="section-title">
        <u-icon name="file-text" color="#f59e0b" size="18"></u-icon>
        <text class="title-text">描述</text>
      </view>
      <text class="description-content">{{ model.description }}</text>
    </view>


    <!-- 提示组件 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        model: {
          id: 11,
          address: '',
          createTime: '',
          description: '',
          imageUrls: '',
        },
        phoneNumbers: []
      }
    },
    computed: {
      propertyTags() {
        try {
          return this.model.tagsJson ? JSON.parse(this.model.tagsJson) : [];
        } catch (e) {
          console.error("Error parsing TagsJson:", e);
          return [];
        }
      },
      listImages() {
        try {
          return this.model.imageUrls ? JSON.parse(this.model.imageUrls) : [];
        } catch (e) {
          console.error("Error parsing ImageUrls:", e);
          return [];
        }
      },
      formattedPrice() {
        if (this.model.price >= 10000) {
          return `${(this.model.price / 10000).toFixed(2)}万`;
        }
        return `${this.model.price}元`;
      }
    },
    onLoad(options) {
      if (options.id) {
        this.model.id = options.id;
        this.fetchData();
      }
    },
    methods: {
      fetchData() {
        uni.$u.http.get('/api/traffic/' + this.model.id).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.$u.toast(message)
            return
          }
          this.model = result

          console.log(result)
        }).catch(err => {
          console.error('获取信息失败:', err)
        })
      },
      handleOpenMap() {

        let pos = this.model.position
        if (!pos) {
          this.$refs.uToast.show({
            message: '未找到位置信息',
            type: 'info'
          });
          return
        }

        let lnglat = JSON.parse(this.model.position)
        // console.log('打开地图导航');
        uni.openLocation({
          latitude: lnglat[1], // 故宫经纬度示例
          longitude: lnglat[0],
          name: this.model.name,
          address: this.model.address
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
  }

  .property-swiper-section {
    margin-bottom: 24rpx;
  }

  .info-card {
    background: white;
    border-radius: 24rpx;
    margin: 0 10rpx 10rpx;
    padding: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #f1f5f9;
  }

  .basic-info-card {
    margin-top: 24rpx; // 留出顶部导航栏的空间

    .property-name {
      font-size: 48rpx;
      font-weight: bold;
      color: #1e293b;
      line-height: 1.3;
      margin-bottom: 16rpx;
      display: block;
    }

    .price-area {
      display: flex;
      align-items: baseline;
      margin-bottom: 24rpx;
      flex-direction: column;

      .price-value {
        font-size: 24upx;
        font-weight: 600;
        color: #333;
        margin-right: 24rpx;
      }

      .area-value {
        font-size: 28rpx;
        color: #64748b;
      }
    }

    .likeveto {
      display: flex;
      align-items: baseline;
      margin-bottom: 24rpx;
      font-size: 30upx;
      color: #64748b;
      flex-direction: row;
      justify-content: space-between;

      .like-value {
        display: flex;
        flex-direction: row;

        margin-right: 10px;
      }

      .veto-value {
        display: flex;
        margin: 0px 10px;
      }
    }

    .tags-section {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16rpx;
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 32rpx;

    .arrow-right {
      margin-left: auto;
    }
  }


  .location-card {
    .address-text {
      font-size: 28rpx;
      color: #475569;
      line-height: 1.5;
    }
  }

  .description-card {
    .description-content {
      font-size: 28rpx;
      color: #475569;
      line-height: 1.6;
    }
  }
</style>